<template>
  <div class="map-view">
    <!--我页面中一个大div，中间有很多除了地图外的图形，所以画了一个顶层div -->
    <!-- middle 地图 -->
    <div style="float: left; height: 100%; width: 100%">
      <!-- 二级div，用做布局 -->
      <div class="viewmap" style="height: 100%">
        <!-- 地图外层div，放置背景图片 -->
        <div style="height: 100%; width: 100%" id="map">
          <!-- echarts地图容器 -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mapJson from "@/assets/js/guangxi";
import mapColors from "@/assets/js/mapColors";
import { useStore } from "vuex";
export default {
  name: "HomeMap",
  data() {
    return {
      seeAll: require("@/assets/images/home.png"),
      // 区域坐标
      geoCoordMap: {
        南昌市: [115.892151, 28.676493],
        景德镇市: [117.214664, 29.29256],
        萍乡市: [113.852186, 27.622946],
        九江市: [115.992811, 29.712034],
        新余市: [114.930835, 27.810834],
        鹰潭市: [117.033838, 28.238638],
        赣州市: [114.940278, 25.85097],
        吉安市: [114.986373, 27.111699],
        宜春市: [114.391136, 27.8043],
        抚州市: [116.358351, 27.98385],
        上饶市: [117.91185, 28.44442],
      },

      dataSelected: {
        南昌市: false,
        景德镇市: false,
        萍乡市: false,
        九江市: false,
        新余市: false,
        鹰潭市: false,
        赣州市: false,
        吉安市: false,
        宜春市: false,
        抚州市: false,
        上饶市: false,
      },
      depCode: "36%",
      depCodeTemp: "36%",
      echartsMap: null,
    };
  },
  setup() {
    const store = new useStore();

    const changeDepCode = (depCode) => {
      // asyncAddStoreCount是mutations中的方法，2是传递过去的数据
      // 异步改变vuex用dispatch方法，这里用setTimeout模拟异步操作
      store.dispatch("updateDepCode", depCode);
    };
    return {
      store,
      changeDepCode,
    };
  },
  mounted() {
    this.initEchartsMap("360000");
	
  },
  methods: {
    // 给每个地区赋值
    convertData(data) {
      // 定义一个数组
      const res = [];
      // 循环遍历每个区域值
      for (let i = 0; i < data.length; i++) {
        // 获取坐标
        const geoCoord = this.geoCoordMap[data[i].name];
        // 判断是否有坐标
        if (geoCoord) {
          // 往数组里设置值
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].depCode),
          });
        }
      }
      return res;
    },
    initEchartsMap(dep_code) {
	
      const _this = this;
      const geoCoordMap = {}; // 散点坐标
      const mapData = []; // 地图数据
      /* 获取地图数据*/
      const mapFeatures = mapJson[dep_code].features;
      mapFeatures.forEach(function (v) {
        // 地区名称
        const name = v.properties.name;
        geoCoordMap[name] = v.properties.cp; // 地区经纬度
        if (dep_code === "360000") {
          // 省区划特殊处理
          v.properties.id = v.id;
        }
        mapData.push(v.properties); // 初始化地图数据
      });
      // 基于准备好的dom，初始化echarts实例
      this.echartsMap = this.$echarts.init(
        document.getElementById("map"),
        null,
        { renderer: "svg" }
      );

      this.$echarts.registerMap("GX", mapJson[dep_code]);

      // 指定图表的配置项和数据
      let titleText = "江西省";
      if (this.depCode === "360000") {
        titleText += "（本级）";
      }
      const option = {
        title: {
          text: titleText,
          padding: [50, 0, 0, 60],
          textStyle: {
            color: "#EEAB59",
            fontSize: 30,
          },
        },
        tooltip: {
          show: false,
          trigger: "item",
          formatter: "{b}",
        },
        toolbox: {
          top: 45,
          left: 10,
          show: true,
          itemSize: 30,
          feature: {
            myToolHome: {
              show: true,
              title: "省市级切换",
              icon: "image://" + this.seeAll,
              onclick: function () {
                _this.echartsMap.dispose();
                if (_this.depCode === "360000") {
                  _this.depCode = "36%";
                } else if (_this.depCode === "36%") {
                  _this.depCode = "360000";
                } else {
                  _this.depCode = "36%";
                }
	
                _this.initEchartsMap(_this.depCode);
                _this.changeDepCode(_this.depCode);
              },
            },
          },
        },
        geo: {
          // 地图配置
          show: true,
          map: "GX",
          aspectScale: 1.625,
          center: [115.839, 27.01],
          zoom: 1.05,
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 14,
                fontWeight: "bold",
                color: "white",
              },
            },
            emphasis: { show: true },
          },
          roam: false, // 是否开启鼠标缩放和平移漫游
          regions: mapColors,
          itemStyle: {
            normal: {
              label: { show: true },
              areaColor: "rgba(128, 128, 128, 0)",
              borderColor: "rgba(0, 255, 0, 0)", // 边界线颜色
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 1,
            },
            emphasis: {
              areaColor: "rgba(0, 255, 0, 0)",
            },
          },
        },
        series: [
          {
            // 地图配置
            name: "地图",
            // mapType: dep_code, // 自定义扩展图
            type: "map",
            geoIndex: 0,
            data: mapData,
          },
          {
            type: `effectScatter`,
            coordinateSystem: `geo`,
            legendHoverLink: true,
            effectType: "ripple",
            showEffectOn: "render",
            rippleEffect: {
              //涟漪特效
              period: 2, //动画时间，值越小速度越快
              brushType: `fill`, //波纹绘制方式 stroke, fill
              scale: 10, //波纹圆环最大限制，值越大波纹越大
              number: 3,
            },
            symbolOffset: [0, 12],
            itemStyle: {
              color: `#FFF440`,
              shadowBlur: 2,
            },
            symbolSize: 10,
            data: [],
            hoverAnimation: true,
            zlevel: 1, // 所属图形的 zlevel 值
          },
        ],
      };
	   
      this.echartsMap.setOption(option);

      this.echartsMap.on("click", (param) => {
        let depCode = "360000";
		
        if (param.seriesType === "map") {
          this.echartsMap.setOption({
            title: {
              text: param.name,
            },
          });
          depCode = param.data.adcode;
          this.depCodeTemp = param.data.adcode;
          if (depCode.substring(2, 6) === "0000") {
            depCode = depCode.substring(0, 2) + "%";
          } else if (depCode.substring(4, 6) === "00") {
            depCode = depCode.substring(0, 4) + "%";
          } else {
            depCode = depCode + "%";
          }
        } else if (param.seriesType === "effectScatter") {
          this.echartsMap.setOption({
            title: {
              text: param.name + "（本级）",
            },
          });
          depCode = this.depCodeTemp;
        }
        this.depCode = depCode;
        //触发事件
        _this.changeDepCode(depCode);

        this.echartsMap.setOption({
          series: [
            { selectedMap: this.dataSelected },
            {
              data: [{ name: param.name, value: this.geoCoordMap[param.name] }],
            },
          ],
        });
      });
      window.addEventListener("resize", () => this.echartsMap.resize(), false);
    },
  },
};
</script>
<style lang='scss' scoped>
/* css样式 */

/* 顶层div */
.map-view {
  width: 103%;
  height: 92%;
}
/* 中间地图背景 */
.viewmap {
  background: url("@/assets/images/jiangxi.png") center center no-repeat,
    //背景图
    rgba(0, 0, 0, 0);
  background-size: 90% auto; //大小大家自己根据需要调整
}
</style>